<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
		<title>网点地图</title>
		<link rel="stylesheet" href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="./map.css" />
		<link rel="stylesheet" type="text/css" href="./iconfont.css" />
	</head>
	<body>
		<!-- 地图 -->
		<div id="container"></div>

		<div class="flex flex-row case">
			<div class="flex flex-row j-center a-center ">
				<img src="./store.png" mode="aspectFit" style="width: 15px;height:16px;"></img>
				<span class="fs-20 ml-2 " style="color: #7a7a7a;">我的门店</span>
			</div>
			<div class="flex flex-row j-center a-center ml-4">
				<img src="./store1.png" mode="aspectFit" style="width: 15px;height:16px;"></img>
				<span class="fs-20 ml-2 " style="color: #7a7a7a;">授权门店</span>
			</div>
			<div class="flex flex-row j-center a-center ml-4">
				<img src="./store2.png" mode="aspectFit" style="width: 15px;height:16px;"></img>
				<span class="fs-20 ml-2" style="color: #7a7a7a;">普通门店</span>
			</div>
		</div>

		<!--  恢复初始化-->
		<div id="iocn" class="icon-font-right">
			<i class="iconfont iconsuofang"></i>
		</div>

		<div id="iocn" class="icon-font-left flex flex-column">
			<i class="iconfont " id="add">+</i>
			<i class="iconfont " id="del">-</i>
		</div>
		<!-- 网点详情 -->
		<div id="storeInfo"></div>

		<!--  SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.15&key=b5af6d525e8796f797ccad004b6aa444'>
		</script>
		<script type="text/javascript" src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://webapi.amap.com/demos/js/liteToolbar.js" type="text/javascript"></script>
		<script type="text/javascript">
			//  tag  颜色  light
			var success = {
				"color": "#44cf85 ",
				"background-color": "#e8f6e8",
			}
			var primary = {
				"color": "#4dabeb",
				"background-color": "#ecf6fd",
			}
			var warning = {
				"color": "#faa851  ",
				"background-color": "#fef5eb",
			}


			// 初始化地图容器
			$("#container").width(document.documentElement.clientWidth).height(document.documentElement
				.clientHeight);


			// 获取url参数
			var GetQueryString = function(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			}
			var info = {
				token: '',
				longitude: '',
				latitude: ''
			}

			// var ApiUrl = "http://42.193.13.198:9013"; // - 测试
			var ApiUrl = "https://gateway.xbtruck.com/lk-truck-webfront"; // - 正式



			var info = JSON.parse(GetQueryString("info")) ? JSON.parse(GetQueryString("info")) : info
			var center = [info.longitude ? info.longitude : 116.20, info.latitude ? info.latitude : 39.56]
			var map = new AMap.Map('container', {
				resizeEnable: true,
				showIndoorMap: false,
				zoom: 8,
				center: center
			});
			var mass = null
			var zoom = 8

			//设置地图比例尺
			AMap.plugin(['AMap.Scale'],
				function() {
					map.addControl(new AMap.Scale());
				});

			AMap.event.addListener(map, 'zoomend', function() {

				if (map.getZoom() < 12) {
					// console.log(mass);
					mass.getStyle().forEach((item, index) => {
						item.size.width = 35
						item.size.height = 35
					})

					$("#storeInfo").empty();
					$("#storeInfo").hide();
				}
			});

			//点击icon 初始化
			$('#iocn').click((e) => {
				map.setZoom(3, false);
				map.setCenter([info.longitude ? info.longitude : 116.20, info.latitude ? info.latitude : 39.56]);
				zoom = 3
				$("#storeInfo").empty();
				$("#storeInfo").hide();
			})

			$('#add').click((e) => {
				if (zoom > 19) return
				zoom++
				map.setZoom(zoom, false);
			})

			$('#del').click((e) => {
				if (zoom < 4) return
				zoom--
				map.setZoom(zoom, false);
			})

			let data = {
				condition: null,
				fixPart: null,
				fixType: null,
				lonLat: {
					latitude: info.latitude,
					longitude: info.longitude
				},
				mile: 10000000,
				pageIndex: 1,
				pageSize: 10000000
			}
			var storeList
			var initData = function() {
				$.ajax({
					url: ApiUrl + "/mendery/list",
					dataType: "json",
					type: "POST",
					data: JSON.stringify(data),
					// contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
					contentType: "application/json;charset=UTF-8",
					headers: {
						"Authorization": info.token
					},
					success: function(res) {
						if (res.data.length) {
							handleData(res.data);
						}
					},
					error: function(err) {}
				})
			}

			// 选择点
			var selected;
			var selectedId;
			var handleData = function(data) {
				// map.setZoom(8, false);
				let style = [];
				let locationData = []

				for (var i = 0; i < data.length; i++) {
					let obj = {}
					if (data[i].canEdit) {
						obj = {
							url: './store.png',
							anchor: new AMap.Pixel(6, 20),
							size: new AMap.Size(35, 35),
							id: data[i].id,
						}
					} else if (data[i].isAuthorization) {
						obj = {
							url: './store1.png',
							anchor: new AMap.Pixel(6, 20),
							size: new AMap.Size(35, 35),
							id: data[i].id,
						}
					} else {
						obj = {
							url: './store2.png',
							anchor: new AMap.Pixel(6, 20),
							size: new AMap.Size(35, 35),
							id: data[i].id,
						}
					}

					style.push(obj)

					let location = [data[i].longitude, data[i].latitude]

					locationData.push({
						lnglat: location,
						list: data[i],
						style: i
					})
				}
				// 绘制海量点
				mass = new AMap.MassMarks(null, {
					opacity: 1,
					zIndex: 111,
					cursor: 'pointer',
					style: style,
				});
				mass.setData(locationData)
				mass.setMap(map);

				mass.on('click', function(e) {
					selected = e.data.list
					selectedId = e.data.list.id
					_massClick(e.data.list, mass)
				})

			}

			// 点击事件
			var _massClick = function(data, mass) {
				// 移动视图
				map.setZoom(17, false);
				zoom = 17
				map.setCenter([data.longitude, data.latitude]);
				// 变换样式
				mass.getStyle().forEach((item, index) => {
					if (item.id === selectedId) {
						item.size.width = 44
						item.size.height = 44
					} else {
						item.size.width = 35
						item.size.height = 35
					}
				})
				// storeInfo
				if (selectedId && $("#storeInfo").is(":hidden")) {
					$("#storeInfo").show();
				}
				// 清空
				$("#storeInfo").empty();
				let div =
					`
				<div id="detail_main">
					<div class="flex flex-row j-sb a-center">
						<div class="absolute-top">
							<img id='imgs' style="width:24px;height:24px;display:none"></image>
						</div>
						<div class="w-16 mt-2">
							<img id='img' class="tui-msg-pic"></image>
						</div>
						<div class="ml-4 tui-item">
							<div class="flex flex-row j-sb a-center">
								<div class="tui-msg-content">
									${data.name.length > 7?data.name.slice(0,7): data.name}
								</div>
								<div class="fs-20 text-grey ml-4">
									${data.menderyNo}
								</div>
							</div>
							<div class="flex flex-row mt-4 flex-1">
								<div class="fs-24  tui-msg-content text-primary">
								${data.mile} km | 	${data.address}
								</div>
							</div>
							<div class="tui-msg-content fs-24 text-grey-darken mt-4">
								${data.fixType.replace(/,/g,"&nbsp;")} 
							</div>
							<div>
								<div id="tag" style="margin-top:6px; margin-bottom: 6px;"></div>
							</div>
						</div>
					</div>
				</div>
				<div id="allBtn" >
					<div class="btn" id="makePhoneCall">
						<i class="iconfont iconphone" aria-hidden="true" style="font-size:14px"></i>
						<span>联系店主</span>
					</div>
					<div class="btn" id="navigateToPage" style="border-left-width: 1px;  border-left-style: solid;  border-left-color: #eaeef1;">
						<i class="iconfont icondaohang" aria-hidden="true" style="font-size:14px"></i>
						<span>到这去</span>
					</div>
				`
				$("#storeInfo").append(div);
				$("#img ").attr("src", data.logoUrl);
				if (data.isAuthorization === 1) {
					$("#imgs").show();
					$("#imgs").attr("src", './shouquan2.png');
				}

				let tagaList = data.fixPart.split(',').slice(0, 3)
				// console.log(tagaList);

				tagaList.forEach((item, index) => {
					$("#tag").append(
						`<div id="${index}" class="uni-tag-icon" style="margin-right: 8px;">${item}</div>`
					)
					switch (index) {
						case 0:
							$("#0").css(primary)
							break;
						case 1:
							$("#1").css(warning)
							break;
						case 2:
							$("#2").css(success)
							break;
					}
				})
			}

			// 功能按钮
			document.addEventListener('UniAppJSBridgeReady', function() {
				// 联系店主
				$("#storeInfo").on('click', '#makePhoneCall', function(e) {
					uni.postMessage({
						data: {
							action: "telephone", // pageTo（页面跳转）telephone（拨打电话）
							data: selected.mobiles
						}
					});
				})
				//  导航
				$("#storeInfo").on('click', '#navigateToPage', function(e) {
					uni.postMessage({
						data: {
							action: "mapNavigate",
							data: {
								name: selected.name,
								lat: selected.latitude,
								lon: selected.longitude
							}
						}
					});
				})
			});



			initData();
		</script>
	</body>
</html>
